<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool系统管理-端口设置</title>
    <link rel="icon" href="/static/icon.png">
    <link rel="stylesheet" href="/static/base.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>

</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="sys/server.html"></top-menu>
        </template>
        <template #main>
            <el-container>
                <el-aside width="200px">
                    <sys-menu index="server.html"></sys-menu>
                </el-aside>
                <el-main>
                    <el-form :model="serverForm" ref="serverForm" :rules="serverRules" label-width="180px"
                             v-loading="formLoading">
                        <el-form-item label="RTMP端口">
                            <el-input-number v-model="serverForm.rtmpport" autocomplete="off" placeholder="RTMP端口"
                                             :min="0" :max="65535" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item label="RTSP端口">
                            <el-input-number v-model="serverForm.rtspport" autocomplete="off" placeholder="rtsp端口"
                                             :min="0" :max="65535" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item label="RTP端口(GB28181流)">
                            <el-input-number v-model="serverForm.rtpport" autocomplete="off" placeholder="RTP端口"
                                             :min="0" :max="65535" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item label="无人观看后自动关闭">
                            <el-input-number v-model="serverForm.autoCloseTime" autocomplete="off"
                                             placeholder="无人观看后自动关闭"
                                             :min="5" :step="1000" controls-position="right"></el-input-number>
                            <span>&nbsp;毫秒</span>
                        </el-form-item>
                        <el-form-item style="margin-top: 50px">
                            <el-button type="primary" @click="submitConfig">更新</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </template>

    </layout>

</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/sys-menu.js"></script>
<script src="/static/request.js"></script>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                formLoading: false,
                mediaTableData: [],
                serverForm: {
                    rtmpport: 0,
                    rtspport: 0,
                    rtpport: 0,
                    autoCloseTime: 0
                },
                serverRules: {}
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.loadMediaConfig()
            });
        },
        methods: {
            //提交
            submitConfig() {
                this.$refs["serverForm"].validate((valid) => {
                    if (valid) {
                        this.setServerConfig()
                    } else {
                        return false;
                    }
                });
            },

            //设置媒体配置
            setServerConfig() {
                this.formLoading = true
                let p = {
                    'rtmp.port': this.serverForm.rtmpport,
                    'rtsp.port': this.serverForm.rtspport,
                    'rtp_proxy.port': this.serverForm.rtpport,
                    'general.streamNoneReaderDelayMS': this.serverForm.autoCloseTime
                }
                request.get(
                    '/zl/api/setServerConfig?'+Qs.stringify(p)).then(res => {
                    this.formLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            //重新加载
                            this.loadMediaConfig()
                            this.$message.success("更新设置成功");
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },

            //加载媒体配置
            loadMediaConfig() {
                this.tableLoading = true
                request.get(`/api/getServerConfig`).then(res => {
                    this.tableLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            //只筛选rtmp的
                            let d = data.data
                            this.serverForm.rtmpport = d['rtmp.port']
                            this.serverForm.rtspport = d['rtsp.port']
                            this.serverForm.rtpport = d['rtp_proxy.port']
                            this.serverForm.autoCloseTime = d['general.streamNoneReaderDelayMS']
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },
        }
    })

</script>
</html>